<template>
    <view class="container">
        <u-steps :list="stepList" :current="current" active-color="#E52B52"></u-steps>
        <view class="step">
            <view v-show="current == 0">
                <u-form :model="form1" ref="uForm1">
                    <u-form-item label="请输入手机号" prop="phone" label-position="top">
                        <u-input v-model="form1.phone" type="number" placeholder="输入手机号" border></u-input>
                    </u-form-item>
                    <u-form-item label="输入验证码" prop="code" label-position="top">
                        <u-input v-model="form1.code" border placeholder="验证码" maxlength="6" class="u-margin-right-30"> </u-input>
                        <view>
                            <u-button type="d" class="btn" @click="getVerfy" :disabled="disabled">{{ btnName }}</u-button>
                        </view>
                    </u-form-item>
                    <view class="u-margin-top-20">
                        <u-button type="p" @click="verfyCode">下一步</u-button>
                    </view>
                </u-form>
            </view>
            <view v-show="current == 1">
                <u-form :model="form2" ref="uForm2">
                    <u-form-item label="请输入新的密码" prop="newPass" label-position="top">
                        <u-input v-model="form2.newPass" placeholder="输入密码" border type="password"></u-input>
                    </u-form-item>
                    <u-form-item label="确认密码" prop="confirm" label-position="top">
                        <u-input v-model="form2.confirm" border placeholder="输入密码" type="password"></u-input>
                    </u-form-item>
                    <view class="u-margin-top-30">
                        <u-button type="p" @click="changePass">下一步</u-button>
                    </view>
                </u-form>
            </view>
            <view v-if="current == 2">
                <view class="o-text-center">
                    <text class="icon icon-checked u-margin-right-20 o-font-color-blue"></text>
                    密码已设置成功!
                </view>
                <view class="u-margin-top-30">
                    <u-button type="p" @click="$u.$MRouter.home.to()">回首页</u-button>
                </view>
            </view>
        </view>
        <Verify @success="callback" mode="pop" captchaType="blockPuzzle" :imgSize="{ width: '330px', height: '155px' }" ref="verify"> </Verify>
    </view>
</template>

<script lang="ts" setup>
import Verify from '@/components/verify/verify.vue'
import { computed, ref } from 'vue'
import {useUserStore} from '@/store'
import { onLoad, onReady } from '@dcloudio/uni-app';

const stepList = ref([{ name: '验证身份' }, { name: '设置密码' }, { name: '完成' }])
const current = ref(0)
const form1 = ref<any>({})
const form2 = ref<any>({})
const disabled = ref(false)
const btnName = ref('发送验证码')
const second = ref(0)
const interval = ref<any>(0)

const $u = computed(() => {
    return uni.$u
})

const uForm1 = ref<any>(null)
const uForm2 = ref<any>(null)

const verify = ref<any>(null)
const userStore = useUserStore()

function getVerfy() {
    uForm1.value?.validate((valid: any) => {
        if (valid) {
            uni.$u.$api.MerchantApi.checkMerchantAccountByPhone({
                phone: form1.value.phone
            })
                .then(() => {
                    //  验证通过  请求后台发送验证码
                    verify.value?.show()
                })
                .catch((e: any) => {
                    uni.$u.toast('该手机号尚未注册!')
                })
        }
    })
}

function callback(params: any) {
    sendMessage(params.captchaVerification)
}

function sendMessage(captchaVerification: string) {
    let para = {
        accountPhone: form1.value.phone,
        verificationCodeType: 2,
        code: captchaVerification
    }
    uni.$u.$api.MerchantApi.sendCode(para).then(() => {
        //触发倒计时（一般用于请求成功验证码后调用）
        uni.$u.toast('验证码发送成功,请注意查收!');
        // 禁用按钮
        disabled.value = true;
        second.value = 60;

        interval.value = setInterval(() => {
            if (second.value > 0) {
                second.value -= 1;
                btnName.value = second.value + 'S';
            } else {
                disabled.value = false;
                second.value = 0;
                btnName.value = '获取验证码';
            }
        }, 1000);
    }).catch(() => {
        uni.$u.toast('验证失败!');
    })
}

function verfyCode() {
    uForm1.value.validate((valid: any) => {
        if (valid) {
            if (form1.value.code == '') {
                uni.$u.toast('请输入验证码');
                return;
            }
            let para = {
                accountPhone: form1.value.phone,
                verificationCode: form1.value.code
            }
            uni.$u.$api.MerchantApi.checkCode(para).then(() => {
                current.value = 1;
            })
            // 验证成功  进入重置密码 页面
        }
    });
}
function changePass() {
    uForm2.value.validate((valid: any) => {
        if (valid) {
            let para = {
                merchantId: userStore.userInfo.merchantId,
                accountPhone: form1.value.phone,
                password: form2.value.newPass
            }
            para = uni.$u.$tools.dealNullParams(para)
            uni.$u.$api.MerchantApi.modifyPassword(para).then(() => {
                uni.$u.toast('密码修改成功!');
                current.value = 2;
            })
        }
    });
}
const rules1 = {
    phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
        },
        {
            validator: (rule: any, value:string|number, callback: Function) => {
                return uni.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: 'blur'
        }
    ]
}

const rules2 = {
    newPass: [{
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
        },
        {
            min: 6,
            max: 20,
            message: '请输入8-20位长度的密码',
            trigger: 'blur'
        }
    ],
    confirm: [{
            required: true,
            message: '请确认新密码',
            trigger: 'blur'
        },
        {
            validator: (rule: any, value:string|number, callback: Function) => {
                return value == form2.value.newPass
            },
            message: '两次密码输入不一致',
            // 触发器可以同时用blur和change
            trigger: 'blur'
        }
    ]
}

onReady(()=>{
    uForm1.value?.setRules(rules1)
    uForm2.value?.setRules(rules2)
    form1.value.phone = userStore.userInfo.phone
})

onLoad((option: any)=>{
    if (option.phone) form1.value.phone = option.phone
})
</script>

<style scoped lang="scss">
.container {
    padding: 20rpx;
    padding-top: 150rpx;

    .step {
        padding: 0 26rpx;
        margin-top: 100rpx;
        font-size: 28rpx;
        line-height: 40rpx;
    }
}
</style>
